<template>
  <div class="bordered">
    <el-row>
      <el-col class="font-medium text-2xl " :offset="9"> 物流详细信息 </el-col>
    </el-row>
    <div class="title">发件人信息</div>
    <el-row :gutter="0">
      <el-col :span="4" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><User /></el-icon>发货人</el-col
      >
      <el-col :span="3" class="descriptions-item-cell">{{
          detailInfo.shiperName
      }}</el-col>
      <el-col :span="4" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><Iphone /></el-icon>手机号</el-col
      >
      <el-col :span="5" class="descriptions-item-cell">{{
          detailInfo.shiperPhone
      }}</el-col>
      <el-col :span="4" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><Location /></el-icon>发货地</el-col
      >
      <el-col :span="4" class="descriptions-item-cell">{{
          detailInfo.shipAddress
      }}</el-col>
    </el-row>
    <div class="title">收件人信息</div>
    <el-row :gutter="0">
      <el-col :span="4" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><User /></el-icon>收件人</el-col
      >
      <el-col :span="3" class="descriptions-item-cell">{{
          detailInfo.accepter
      }}</el-col>
      <el-col :span="4" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><Iphone /></el-icon>手机号</el-col
      >
      <el-col :span="5" class="descriptions-item-cell">{{
        detailInfo.clientPhone
      }}</el-col>
      <el-col :span="4" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><Location /></el-icon>收货地址</el-col
      >
      <el-col :span="4" class="descriptions-item-cell">{{
          detailInfo.destination
      }}</el-col>
    </el-row>
    <div class="title">运输信息</div>
    <el-row :gutter="0">
      <el-col :span="4" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><MessageBox /></el-icon>发货日期</el-col
      >
      <el-col :span="8" class="descriptions-item-cell">{{
        detailInfo.deliveryTime
      }}</el-col>
      <el-col :span="5" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><Iphone /></el-icon>运输联系方式</el-col
      >
      <el-col :span="7" class="descriptions-item-cell">{{
        detailInfo.carrierPhone
      }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><List /></el-icon>物流单号</el-col
      >
      <el-col :span="8" class="descriptions-item-cell">{{
        detailInfo.courierNumber
      }}</el-col>
      <el-col :span="5" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><Van /></el-icon>运输车辆信息</el-col
      >
      <el-col :span="7" class="descriptions-item-cell">{{
        detailInfo.license
      }}</el-col>
    </el-row>
    <div class="title">货物信息</div>
    <el-row :gutter="0">
      <el-col :span="4" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><OfficeBuilding /></el-icon>生产企业</el-col
      >
      <el-col :span="10" class="descriptions-item-cell">{{
        detailInfo.qymc
      }}</el-col>
      <el-col :span="4" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><Mug /></el-icon>产品名称</el-col
      >
      <el-col :span="6" class="descriptions-item-cell">{{
        detailInfo.cpmc
      }}</el-col>
    </el-row>
    <el-row :gutter="0">
      <el-col :span="4" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><Tickets /></el-icon>批次号</el-col
      >
      <el-col :span="10" class="descriptions-item-cell">{{
        detailInfo.pch
      }}</el-col>
      <el-col :span="4" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><Coin /></el-icon>运输数量</el-col
      >
      <el-col :span="6" class="descriptions-item-cell">{{
        detailInfo.number
      }}</el-col>
    </el-row>
    <el-row :gutter="0">
      <el-col :span="4" class="descriptions-item-cell descriptions-item-label"
        ><el-icon><Document /></el-icon>订单编号</el-col
      >
      <el-col :span="20" class="descriptions-item-cell">{{
        detailInfo.orderNumber
      }}</el-col>
    </el-row>
  </div>
</template>

<script setup>
import { upWlInfo } from "@/api/apiPath/fourPart.js";
import {onMounted, ref} from "vue";
import {initWlTableInfo} from "@/api/methods/initInfo.js";

const queryForm = ref({
  query: "",
  pageNum: 1,
  pageSize: 5,
  totalSize: 0,
});
const props = defineProps([
    "detailInfo"
])

onMounted(()=> {

})
</script>

<style scoped>
.bordered {
  border: 1px solid #ccc;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
}
.descriptions-item-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #ebeef5;
  padding: 12px 10px;
  font-size: 14px;
  font-weight: 500;
}
.descriptions-item-label {
  color: #909399;
  background: #fafafa;
}
</style>


